<link rel="stylesheet" href="${ctx}/resources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="${ctx}/resources/jquery-file-upload/css/jquery.fileupload-ui-noscript.css">
<link rel="stylesheet" href="${ctx}/resources/jquery-file-upload/css/jquery.fileupload-ui.css">
<link rel="stylesheet" href="${ctx}/resources/jquery-file-upload/css/jquery.fileupload.css">

<script type="text/javascript" src="${ctx}/resources/jquery-file-upload/js/vendor/jquery.ui.widget.js" charset="UTF-8" ></script>
<script type="text/javascript" src="${ctx}/resources/jquery-file-upload/js/jquery.iframe-transport.js" charset="UTF-8" ></script>
<script type="text/javascript" src="${ctx}/resources/jquery-file-upload/js/jquery.fileupload.js" charset="UTF-8" ></script>
<style type="text/css">
	.container{
		margin-top:50px;
	}
	#file-table{
		margin-top:25px;
	}
	
	#file-table td {
		vertical-align:middle;
	}
 	.bar {
	    height: 22px;
	    margin-top: 35px;
	    background: green;
	}
	input[type="radio"], input[type="checkbox"] {
	    margin: 10px 9px 0;
	}
	.mask {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    filter: alpha(opacity = 40);
	    opacity: 0.40;
	    font-size: 1px;
	    text-align:center;
	    overflow: hidden;
	    background: #1B1818;
	}
	.mask-msg {
		filter: alpha(opacity = 0);
		opacity: 0;
	}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		var uploader = $("#fileupload-file");
		var num = '1';
		$('#fileupload').fileupload({
			autoUpload : true,//是否自动上传  
			url: '${ctx}/topic/attachment/copy.web?dir=${dir}',//上传地址  
			dataType : 'json',
			done : function(e,data) {//设置文件上传完毕事件的回调函数  
				var content = "";
				$("#file-table").css("display","block");
				var json = JSON.stringify(data.result);
				json = jQuery.parseJSON(json);
				var obj2 = json.object;
				if(json.resposecode == 200){
					for(var i = 0;i < obj2.length;i++){
						num ++ ;
						content += "<tr id='"+num+"'><td class='preview'><img src='${ctx}/"+obj2[i].accessUrl+"' style='max-width:80px;height:80px;'/></td><td>"
							+"<input type='hidden' name='myfiles"+(num-1)+"' value='"+obj2[i].path+"'>"
							+obj2[i].name+"</td><td><input value='"+((num-1)+ ${sortnumber})+"' style='width:60px;' name='sortnumber"+(num-1)+"'/></td> <td>"+obj2[i].size+"</td><td>"+obj2[i].suffix+"</td><td><a href=\"javascript:deleteTr('"+num+"')\">删除</a></td></tr>"
					}
				} else {
					$('.progress').css('display','none');
					$('.progress-bar').css('width','0%');
					alert(json.message);
					return;
				}
				$("#file-list").after(content);
				$('.progress').css('display','none');
				$('.progress-bar').css('width','0%');
			},
			progressall : function(e, data) {//设置上传进度事件的回调函数  
				$('.progress').css('display','block');	
				var progress = parseInt(data.loaded / data.total * 60, 17);
				$('.progress-bar').css('width', progress + '%');
			}
		});
	});
	//删除当前行
     //要点删除一行输入框的方法
    function deleteTr(id){
        $("#"+id).remove();
    }
    
</script>
<div class="container-fluid">
	<form id="fileupload-file" class="fileupload-file">
		<input type="hidden" name="trNumber" id="trNumber"/>
		<input type="hidden" value="${dir}" name="dir" id="dir"/>
		<input type="hidden" value="${attachmentSize}" name="attachmentSize" id="attachmentSize"/>
		<input type="hidden" id="contentFilter" name="contentFilter" value="${contentFilter}">
		<div class="">
			<span class="btn-file btn-success fileinput-button"> 
				<i class="glyphicon glyphicon-plus"></i> 
				<span>${selectfile}</span> 
				<input id="fileupload" name="files[]" multiple="" type="file">
			</span>
			<button type="button" onclick="fileUploadFile()" id="btn-upload" class="btn-file btn-primary start">
				<i class="glyphicon glyphicon-upload"></i> 
				<span>${startupload}</span>
			</button>
		</div>
		<div class="progress" style="margin-top:5px;display:none">
		  	<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
		  	</div>
		</div>
		<div>
			<table id="file-table" class="table table-striped table-bordered table-hover" style="display:none">
				<tr id="file-list"><td class='preview'>预览</td><td style="width:66%">文件名</td><td>排序号</td><td style="120px;">文件大小</td><td style="120px;">文件类型</td><td style="width:50px;">操作</td></tr>
			</table>
		</div>
	</form>
</div>